<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
  <title>Babylon - Getting Started</title>
  <!-- link to the last version of babylon -->
  <script src="babylon.2.3.js"></script>
  <link href="index.css" rel="stylesheet" type="text/css" media="all">
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      // your code here
      var canvas = document.getElementById('renderCanvas');
      var engine = new BABYLON.Engine(canvas, true);

      var createScene = function() {
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3(.5, .5, .5);

        // camera
        var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
        camera.setPosition(new BABYLON.Vector3(0, 0, -20));
        camera.attachControl(canvas, true);

        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        light.intensity = 0.7;

        var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
        pl.diffuse = new BABYLON.Color3(1, 1, 1);//猜想是边缘弥漫的颜色，实际没有发现任何效果，更改值多大都没见到效果
        pl.specular = new BABYLON.Color3(1, 1, 1);//这里会看见效果，在物体表面反射出来的光是这个颜色，他们的值可以大于1，谁的值越大，圆形光中哪种颜色的光圈越强越大。可以大于255。
        pl.intensity = 0.8;//光的强度

        var mat = new BABYLON.StandardMaterial("mat1", scene);
        mat.alpha = 1.0;
        mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);//没见到效果
        //mat.backFaceCulling = false;
        //mat.wireframe = true;
        var texture = new BABYLON.Texture("a.png", scene);
        mat.diffuseTexture = texture;
        //mat.diffuseTexture.hasAlpha = true;

        var hSpriteNb = 6; // 6 sprites per raw
        var vSpriteNb = 4; // 4 sprite raws

        var faceUV = new Array(6);
        for (var i = 0; i < 6; i++) {
          faceUV[i] = new BABYLON.Vector4(i / hSpriteNb, 0, (i + 1) / hSpriteNb, 1 / vSpriteNb);
        }
        //猜测，分别是左下角，和右上角。

        var faceColors = new Array(6);

        faceColors[4] = new BABYLON.Color4(1, 0, 0, 1);
        faceColors[1] = new BABYLON.Color4(0, 1, 0, 1);
        //颜色会影响图片颜色

        var options = {
          width: 10,
          height: 3,
          depth: 5,
          faceUV: faceUV,
          faceColors: faceColors
        };

        var box = BABYLON.MeshBuilder.CreateBox('box', options, scene);
        box.material = mat;
        //box.hasVertexAlpha = true;

        scene.registerBeforeRender(function() {
          pl.position = camera.position;
        });

        return scene;
      };

      var scene = createScene();

      engine.runRenderLoop(function() {
        scene.render();
      });

      window.addEventListener('resize', function() {
        engine.resize();
      });

    });
  </script>
</head>

<body>
  <canvas id="renderCanvas"></canvas>
</body>

</html>
